import { MenuItem } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useGetThemeStateStore } from 'stores/theme';

import { useStyles } from '../dialogs/UIs/styled-mui-dialog';
import { GfsInputSelectBase } from '../forms';

export enum SORT_DIRECTION {
    ASC = 'asc',
    DESC = 'desc'
}

interface Props {
    onClickApply: Function;
    initValue?: SORT_DIRECTION;
}

export const SortDirection = (props: Props) => {
    const style = useStyles();
    const { initValue, onClickApply } = props;
    const [value, setValue] = useState<SORT_DIRECTION>();
    const {mode,isLight,setMode,color1,bgColor,bgColor1,bgColor0,txtColor,txtColor3} = useGetThemeStateStore();

    useEffect(() => {
        if (initValue) {
            setValue(initValue);
        } else {
            setValue(SORT_DIRECTION.ASC);
        }
    }, [initValue]);

    const onChange = (event) => {
        const value = event.target.value;
        setValue(value);
        onClickApply(value);
    };

    return (
        <GfsInputSelectBase
            value={value || ''}
            onChange={onChange}
            sx={{
                width: '100px',
                background:bgColor+' !important',
                '& .MuiInputBase-input':{
                    background:bgColor+' !important',
                    color:txtColor+' !important',
                },
                '& .MuiSvgIcon-root':{
                    fill:txtColor+' !important',
                },
                '& .MuiSelect-select': {
                    height: '40px',
                    // padding: '8px 30px 2px 15px',
                    textTransform: 'capitalize',
                    padding: '12px 30px 2px 15px',
                    fontFamily: 'Rubik !important',
                    fontWeight: '400 !important',
                    fontSize: '12px !important',
                    lineHeight: '130% !important',
                }
            }}
        >
            {Object.keys(SORT_DIRECTION).map((key: string) => (
                <MenuItem
                    key={SORT_DIRECTION[key]}
                    value={SORT_DIRECTION[key]}
                    className={style.menuItem}
                    sx={{ textTransform: 'capitalize' }}
                >
                    {SORT_DIRECTION[key]}
                </MenuItem>
            ))}
        </GfsInputSelectBase>
    );
};
